<template>
  <el-dialog
      v-model="dialogVisible"
      title="调整课程时间"
      width="500px"
      :close-on-click-modal="false"
  >
    <el-form
        :model="formData"
        label-width="100px"
        label-position="right"
    >
      <!-- 当前课程信息 -->
      <el-form-item label="当前课程:">
        <div class="current-course-info">
          <div class="course-name">{{ selectedCourse.name }}</div>
          <div class="original-time">
            原时间: {{ selectedCourse.specificDate }} {{ selectedCourse.day }} 第{{ selectedCourse.lessonIndex + 1 }}节
          </div>
          <div class="original-teacher">教师: {{ selectedCourse.teacher }}</div>
          <div class="original-classroom">教室: {{ selectedCourse.classroom }}</div>
        </div>
      </el-form-item>

      <!-- 调整日期 -->
      <el-form-item label="调整日期:" required>
        <el-date-picker
            v-model="formData.specificDate"
            type="date"
            placeholder="请选择日期"
            style="width: 100%"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <!-- 调整节次 -->
      <el-form-item label="调整节次:" required>
        <el-select
            v-model="formData.lessonIndex"
            placeholder="请选择节次"
            style="width: 100%"
        >
          <el-option
              v-for="(lesson, index) in lessons"
              :key="index"
              :label="`第${index + 1}节 (${lesson.time})`"
              :value="index"
          />
        </el-select>
      </el-form-item>

      <!-- 冲突检查 -->
      <el-form-item label="冲突检查:" v-if="conflictCourse">
        <div class="conflict-warning">
          <el-icon color="#E6A23C"><Warning /></el-icon>
          <span>目标时间已有课程: {{ conflictCourse.name }} ({{ conflictCourse.teacher }})</span>
        </div>
      </el-form-item>

      <!-- 调整后信息预览 -->
      <el-form-item label="调整后信息:" v-if="formData.specificDate && formData.lessonIndex !== null">
        <div class="adjusted-info">
          <div>日期: {{ formatDate(formData.specificDate) }}</div>
          <div>星期: {{ getWeekDayNameFromDate(formData.specificDate) }}</div>
          <div>节次: 第{{ formData.lessonIndex + 1 }}节</div>
          <div>时间段: {{ getSelectedTime }}</div>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button
          type="primary"
          @click="handleConfirm"
          :disabled="!formValid || !!conflictCourse"
      >
        确认调整
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {  computed, watch, reactive } from 'vue';
import { Warning } from '@element-plus/icons-vue';

const props = defineProps({
  modelValue: Boolean,
  selectedCourse: {
    type: Object,
    required: true
  },
  lessons: {
    type: Array,
    default: () => []
  },
  courseSchedule: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['update:modelValue', 'confirm']);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

// 使用reactive让表单数据响应式
const formData = reactive({
  specificDate: '',
  lessonIndex: null
});

// 初始化表单
const initForm = () => {
  formData.specificDate = props.selectedCourse.specificDate;
  formData.lessonIndex = props.selectedCourse.lessonIndex;
};

// 根据日期获取星期几
const getWeekDayNameFromDate = (date) => {
  if (!date) return '';
  const dateObj = new Date(date);
  const weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  return weekDays[dateObj.getDay()];
};

// 格式化日期显示
const formatDate = (date) => {
  if (!date) return '';
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

// 获取对应的时间段
const getSelectedTime = computed(() => {
  if (formData.lessonIndex === null || formData.lessonIndex === undefined) return '';
  return props.lessons[formData.lessonIndex]?.time || '';
});

// 冲突检查
const conflictCourse = computed(() => {
  if (!formData.specificDate || formData.lessonIndex === null) {
    return null;
  }

  const date = new Date(formData.specificDate);
  const weekDay = date.getDay();
  const weekDayName = getWeekDayNameFromDate(formData.specificDate);
  const timeRange = getSelectedTime.value;

  return props.courseSchedule[weekDayName]?.[timeRange] || null;
});

// 表单验证
const formValid = computed(() => {
  return formData.specificDate && formData.lessonIndex !== null;
});

// 处理确认
const handleConfirm = () => {
  if (!formValid.value || conflictCourse.value) return;
  // 传递完整的调整数据给父组件
  emit('confirm', {
    specificDate: formData.specificDate,
    lessonIndex: formData.lessonIndex,
    timeSlotId: props.selectedCourse.timeSlot?.slotId, // 使用原有的timeSlotId
    newTime: getSelectedTime.value,
    newDay: getWeekDayNameFromDate(formData.specificDate)
  });

  dialogVisible.value = false;
};

// 监听显示状态变化
watch(() => props.modelValue, (val) => {
  if (val) {
    initForm();
  }
});
</script>


<style scoped>
.current-course-info {
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.course-name {
  font-weight: bold;
  color: #409eff;
  margin-bottom: 4px;
}

.original-time {
  font-size: 13px;
  color: #606266;
}

.conflict-warning {
  display: flex;
  align-items: center;
  color: #E6A23C;
  padding: 8px 12px;
  background-color: #fdf6ec;
  border-radius: 4px;
}

.conflict-warning .极el-icon {
  margin-right: 8px;
}

.adjusted-info {
  padding: 8px 12px;
  background-color: #f0f9ff;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.adjusted-info div {
  margin-bottom: 4px;
  font-size: 13px;
  color: #606266;
}

.adjusted-info div:last-child {
  margin-bottom: 0;
}

.info-placeholder {
  color: #909399;
  font-style: italic;
}

:deep(.el-form-item__content) {
  display:block;
}
</style>
